@import "@/styles/var.scss";
@import "@/styles/fun.scss";

.ContentMdComponent {

    // 自定义文章内容样式
    .markdown-body {
        // 继承父级字体：font-family: inherit;
        @apply font-[inherit] dark:bg-transparent dark:text-[#8c9ab1] !transition-colors;

        pre {
            margin: 15px 0;

            code.hljs {
                border-radius: 10px;
                font-weight: 400;

                @include scrollbar-style(rgba(255, 255, 255, 0.3));
            }
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            @apply dark:text-white dark:border-black-b transition-colors;
        }

        h1 {
            @apply text-2xl my-6 pb-3 border-b;

            &::before {
                content: "✨️";
                @apply pr-3;
            }
        }

        h2 {
            @apply relative text-lg my-8 pl-5;

            &::before {
                content: "";
                @apply absolute left-0 top-[50%] -translate-y-1/2 w-2 h-full bg-primary;
            }
        }

        h3 {
            @apply relative text-lg my-5 pl-5;

            &::before {
                content: "#";
                @apply absolute left-0 top-[50%] -translate-y-1/2 text-primary;
            }
        }

        h4,
        h5,
        h6 {
            @apply relative text-lg my-3;
        }

        hr {
            @apply my-5 border dark:border-[#4e5969] transition-colors;
        }

        p code,
        ul code {
            @apply bg-[rgba(13,110,253,0.1)] dark:bg-[#334052] text-[#0d6efd] rounded-md py-1 px-2 text-sm transition-colors;
        }

        li {
            @apply my-2.5 list-decimal ml-14;
        }

        a {
            @apply text-primary
        }

        p {
            @apply leading-9 mb-2;

            img {
                // 图片模糊
                @apply blur-[20px] rounded-xl cursor-pointer transition-all;
            }
        }

        strong {
            @apply font-sans text-[15px];
        }

        table {
            @apply w-full;

            th {
                @apply font-sans bg-[#f1f7fd];
            }

            tr,
            th,
            td {
                @apply border p-[10px_20px];
            }
        }

        input[type="checkbox"] {
            width: 16px;
            height: 16px;
            border-radius: 4px;
            position: relative;
            cursor: not-allowed;
        }
    }
}